<template>
  <div class="header-menu-container">
    <div v-if="false" class="middle-flex banner-list">
      <div @mouseover.stop="showModal" @mouseleave.stop="hideModal">
        <div class="banner-item">
          <span>幻熊产品</span>
        </div>
        <div
          class="globale-modal-container"
          :class="{ active: visibile }"
          @mouseleave="$emit('input', false)"
          @mousemove="$emit('input', true)"
        >
          <!-- 查看 -->
          <div v-if="!isEdit" class="router-list flex">
            <div
              @click="onOpen(it)"
              :class="$route.path.includes(it.path) ? 'active' : ''"
              class="router-item"
              v-for="(it, i) in routers"
              :key="i"
            >
              {{ it.name }}
            </div>
          </div>
          <!-- 添加 -->
          <div v-else class="router-list flex">
            <a-checkbox-group :value="checkRoutes" @change="onChange">
              <a-checkbox
                :value="it.path"
                class="router-item"
                v-for="(it, i) in routers"
                :key="i"
                >{{ it.name }}</a-checkbox
              >
            </a-checkbox-group>
          </div>
          <!-- 确定，添加 -->
          <div v-if="isEdit" class="middle-flex bottom">
            <a-button type="default" @click="hideModal">取消</a-button>
            <a-button style="margin-right:10px;" type="primary" @click="add"
              >添加</a-button
            >
          </div>
        </div>
      </div>
      <div
        class="banner-item"
        v-for="(it, i) in customRoutes"
        :class="$route.path.includes(it.path) ? 'active' : ''"
        :key="i"
        @click="onUpdateRoute(it)"
        @mouseover.stop
        @mouseleave.stop
      >
        {{ it.name }}
      </div>
      <a-icon
        @mouseover.stop
        @mouseleave.stop
        @click="showEdit"
        type="folder-add"
        class="folder-add"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visibile: false,
      isEdit: false,
      checkRoutes: []
    };
  },
  computed: {
    customRoutes() {
      const { customRoutes } = this.$store.state.permission;
      return this.routers.filter(item =>
        customRoutes.some(path => path === item.path)
      );
    },
    routers() {
      let routes = this.$store.state.permission.routers;
      let routers = routes.find(it => it.path === "/").children;
      routers = routers.filter(it => !it.invisible);
      return routers || [];
    }
  },
  mounted() {
    this.checkRoutes = [...this.customRoutes];
  },
  methods: {
    showEdit() {
      this.isEdit = true;
      this.visibile = true;
    },
    showModal() {
      this.visibile = true;
    },
    hideModal() {
      this.visibile = false;
      this.isEdit = false;
    },
    onOpen(it) {
      const { children } = it;
      this.$router.push({
        path: children[0].path
      });
      this.$emit("input", false);
    },
    onChange(e) {
      this.checkRoutes = e;
    },
    onUpdateRoute(it) {
      this.$store.commit("UPDATE_ROUTER_MAP", it);
      this.$router.push(it.path);
    },
    add() {
      this.$store.commit("UPDATE_ROUTER_CUSTOM", this.checkRoutes);
      this.hideModal();
    }
  }
};
</script>

<style lang="less" scoped>
.globale-modal-container {
  line-height: 1;
  position: absolute;
  top: 62px;
  left: 0;
  width: 1000px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 0 0 5px 5px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  &.active {
    opacity: 1;
    visibility: visible;
  }
  .router-list {
    padding: 20px;
    .router-item {
      margin-right: 15px;
      color: #ffffff;
      cursor: pointer;
      &:hover {
        color: #1890ff;
      }
    }
    .active {
      color: #1890ff;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    flex-direction: row-reverse;
    width: 100%;
    padding: 20px;
  }
}
.banner-list {
  flex: 1;
  position: relative;
  color: rgb(165, 171, 178);
  .banner-item {
    margin: 0 10px;
    font-weight: 500;
    cursor: pointer;
    &:hover {
      color: rgb(62, 108, 194);
    }
  }
  .active {
    color: rgb(62, 108, 194);
  }
  .folder-add {
    margin-left: 10px;
  }
}
</style>
